<style lang="less">
.card_style {
  height: 100%;
  width: 100%;
  overflow: hidden;
  .ivu-card-body {
    padding: 0px;
  }
}
.page_style {
  margin-top: 10px;
  text-align: right;
}
.bench_search {
  margin-bottom: 10px;
}
.nopadding .ivu-table-cell {
  padding: 0px 0px;
}
.item1 {
  height: 42px;
  line-height: 40px;
}
.marginR2 {
  margin-right: 2%;
}
.fontsize20 {
  font-size: 20px;
}
.fontTitle {
  font-size: 20px;
  height: 52px;
  text-align: right;
  padding-top: 16px;
  // vertical-align: bottom;
}
.fontContent {
  font-size: 20px;
  height: 52px;
  text-align: left;
  padding-top: 16px;
  color: #dc9387;
  // vertical-align: bottom;
}
.countNum {
  font-size: 35px;
  color: #dc9387;
}
.new-btn-sty {
  margin-right: 5px;
  color: #fff;
  background-color: #235ca7;
  border-color: #235ca7;
  font-weight: 500;
}
.new-btn-sty1 {
  margin-right: 5px;
  color: #fff;
  background-color: #598ed1;
  border-color: #598ed1;
  font-weight: 500;
}
.text-overflow {
  width: 300px; /* 超过宽度就显示... */
  text-overflow: ellipsis; /* 显示... */
  overflow: hidden; /* 隐藏文字 */
  white-space: nowrap; /* 不换行 */
  cursor: pointer; /* hover显示手形 */
}
.search-info-style {
  margin-top: 10px;
}
.table-input {
  border: #312e2e solid 1px;
  border-left: 0px;
  border-right: 0px;
  line-height: 50px;
}
.table-col {
  border: #312e2e solid 1px;
  line-height: 50px;
}
.demo-drawer-footer {
  margin-top: 80px;
}
</style>
<template xmlns:v-slot="http://www.w3.org/1999/XSL/Transform">
  <div>
    <Row class="search-info-style">
      <Col span="8">
      <span style="">服务人员：</span>
      <Input v-model="service_name"
             placeholder="请填写服务人员：" />
      </Col>
      <!-- <Col span="12">
        <span>评价时间段：</span>
        <DatePicker type="date" v-model="searchInfo.start_time" placeholder="选择开始时间" style="width: 30%;"></DatePicker>
        ～ <DatePicker type="date" v-model="searchInfo.end_time" placeholder="选择结束时间" style="width: 30%;"></DatePicker>
      </Col> -->
      <!-- <Col span="6">
        <span style="">审批人：</span>
        <Input style="width: 70%;" v-model="searchInfo.operator" />
      </Col> -->
      <!--      <Col span="3">-->
      <!--        ～ <DatePicker type="date" v-model="searchInfo.end_time" placeholder="选择结束时间" style="width: 50%;"></DatePicker>-->
      <!--      </Col>-->
      <Col style="float:right"
           pull="1">
      <Button class="new-btn-sty"
              @click="init()">
        <Icon type="ios-search" />查询
      </Button>
      <Button class="new-btn-sty"
              @click="searchDatawork()">
        <Icon type="ios-search" />重置
      </Button>
      </Col>
    </Row>
    <Row class="search-info-style">
      <!-- <Col span="6">
        <span>类别编号：</span>
        <Select v-model="searchInfo.result" filterable transfer="" style="width: 70%;">
          <Option value="">全部</Option>
          <Option value="0">驳回</Option>
          <Option value="1">通过</Option>
          <Option value="2">审批中</Option>
        </Select>
      </Col> -->
      <!--      <Col span="21">-->
      <!--      </Col>-->
      <!--      <Col span="3">-->
      <!--        <Button class="new-btn-sty" @click="init">-->
      <!--          <Icon type="ios-search" /> 查询-->
      <!--        </Button>-->
      <!--        <Button class="new-btn-sty" @click="searchDatawork">-->
      <!--          <Icon type="success" /> 重置-->
      <!--        </Button>-->
      <!--      </Col>-->
    </Row>
    <!-- <Col style="margin-top:20px" pull="-10">
        <Button class="new-btn-sty" @click="addNew()"><Icon type="ios-search" />新增</Button>
        <Button class="new-btn-sty" @click="searchDatawork()"><Icon type="ios-search" />编辑</Button>
      </Col> -->
    <Row>
      <Col span="24">
      <Table border
             :columns="columns"
             :data="datalist"
             ref="personSelection"
             style="margin-top:10px;"
             @on-selection-change="personSelection()">
        <template slot-scope="{ row }"
                  slot="event_type">
          <span v-if="row.event_type == '1'">新增</span>
          <span v-if="row.event_type == '2'">注销</span>
          <span v-if="row.event_type == '3'">跨街道调动</span>
          <span v-if="row.event_type == '4'">街道内调动</span>
          <span v-if="row.event_type == '5'">区内调动</span>
          <span v-if="row.event_type == '6'">跨区调动</span>
        </template>
        <template slot-scope="{ row }"
                  slot="state">
          <span v-if="row.state == '1'">调入地审批</span>
          <span v-if="row.state == '2'">区审批</span>
        </template>
        <template slot-scope="{ row }"
                  slot="result">

          <span>{{ timeParse(row.create_time,'{y}-{m}-{d} ')}}</span>

        </template>
        <template slot-scope="{ row }"
                  slot="sex">
          <span v-if="row.sex == '0'">男</span>
          <span v-if="row.sex == '1'">女</span>
        </template>
      </Table>
      <Row v-if="searchInfo.loading1 == true">
        <Col class="demo-spin-col"
             span="8"
             offset="8">
        <Spin fix>
          <Icon type="ios-loading"
                size=18
                class="demo-spin-icon-load"></Icon>
          <div>数据正在加载</div>
        </Spin>
        </Col>
      </Row>
      </Col>
    </Row>
    <!-- <Page :total="searchInfo.totalnum" class="page_style" :current="searchInfo.currentPageNo"
          :page-size="searchInfo.currentPageSize" @on-change="changePageNo" show-total show-elevator show-sizer @on-page-size-change="changePagesize"/> -->
    <Modal v-model="processModal"
           title="详情"
           width="80%">
      <Row>
        <Col span="24">
        <Table :columns="columnsDetail"
               :data="dataDetail"
               ></Table>
        <!-- <Form ref="formInline" :model="formItem"  inline>
            <FormItem label="评价人名字">
            <Input  disabled v-model="formItem.evaluation_name" placeholder="Enter something..."></Input>
        </FormItem>
        <FormItem label="条目名称">
            <Input disabled v-model="formItem.entry_name" placeholder="Enter something..."></Input>
        </FormItem>
        <FormItem label="类别编号">
            <Input disabled v-model="formItem.category_no" placeholder="Enter something..."></Input>
        </FormItem>
        <FormItem label="服务人员id">
            <Input disabled v-model="formItem.evaluation_id" placeholder="Enter something..."></Input>
        </FormItem>
        
    </Form> -->
        <Row v-if="searchInfo.loading1 == true">
          <Col class="demo-spin-col"
               span="8"
               offset="8">
          <Spin fix>
            <Icon type="ios-loading"
                  size=18
                  class="demo-spin-icon-load"></Icon>
            <div>数据正在加载</div>
          </Spin>
          </Col>
        </Row>
        </Col>
      </Row>
    </Modal>

    <!-- 新增 -->
    <Drawer title="经验内容"
            v-model="drawer1"
            width="720"
            >
      <Form :model="formData">
        <Row :gutter="32">
          <Col span="24">
          <FormItem label="服务类别"
                    label-position="top">
            <Input v-model="formData.experience_name"
                   placeholder="请填写服务类别" />
          </FormItem>
          </Col>
        </Row>
        <!-- <Col span="6">
        <span>类别编号：</span>
        <Select v-model="searchInfo.result" filterable transfer="" style="width: 70%;">
          <Option value="">全部</Option>
          <Option value="0">驳回</Option>
          <Option value="1">通过</Option>
          <Option value="2">审批中</Option>
        </Select>
      </Col> -->

        <Row :gutter="32">
          <Col span="24">
          <FormItem label="类别编号："
                    label-position="top">
            <!-- <Input type="textarea" v-model="formData.experience_content" :rows="4" placeholder="请填写类别编号" /> -->
            <Input v-model="formData.experience_name"
                   placeholder="请填写类别编号" />
          </FormItem>
          </Col>
        </Row>
        <Col span="24">
        <span>评价时间段：</span>
        <DatePicker type="date"
                    v-model="searchInfo.start_time"
                    placeholder="选择开始时间"
                    style="width: 30%;"></DatePicker>
        ～ <DatePicker type="date"
                    v-model="searchInfo.end_time"
                    placeholder="选择结束时间"
                    style="width: 30%;"></DatePicker>
        </Col>

      </Form>

      <div class="demo-drawer-footer">
        <Button style="margin-right: 8px"
                @click="drawer1 = false">取消</Button>
        <Button type="primary"
                @click="complete()">确定</Button>
      </div>
    </Drawer>
  </div>
</template>

<script>
import { selectAllEvaluation } from '@/api/workerV2'
import { timeParse } from '@/libs/tools.js'
import { getOffice, getPersonInfoList, updatePersonnelPassInfo, updateCP, updatePersonCompanyCode, addRecord, getFlowList, getRecordList, updateFlow, getRegionList, getTypeNameList, createPersonneInfo, getPersonInfo, deleteComplaint, updatePersonneInfo, createTransfer, date2str } from '@/api/eventlist'
export default {
  data () {
    return {
      dataDetail:[],
      formItem: [],
      service_name: '',
      timeParse,
      drawer1: false,
      formData: {},
      mailList1: [],
      mailList2: [],
      mailList3: [],
      modal: false,
      okModel: false,
      operator: '',
      company_code: this.$store.state.user.severUserInfo.company_code,
      level: this.$store.state.user.severUserInfo.company_grade,
      reason: '',
      datalist: [],
      addModal: false,
      updateModal: false,
      showModal: false,
      handle_time1: '',
      deleteModal: false,
      jdnddModal: false,
      kjdddModal: false,
      qnddModal: false,
      kqddModal: false,
      processModal: false,
      ddInfo: {},
      addinfo: {},
      updateinfo: {},
      showinfo: {},
      row: '',
      deleteInfo: {},
      handleInfo: {},
      searchInfo: {
        applytime: [],
        currentPageNo: 1,
        currentPageSize: 10,
        loading1: true
      },
      reginList: [[], [], []],
      dictList: [[], [], []],
      processlist: [],
      communityList: [],
      columnsDetail: [
        {
          title: '评价人名字',
          key: 'evaluation_name',
          Width: 140, align: 'center'
        },
        {
          title: '条目名称',
          key: 'entry_name',
          Width: 140, align: 'center'
        },
        {
          title: '类别编号',
          key: 'category_no',
          minWidth: 160, align: 'center'
        },
        {
          title: '服务人员id',
          key: 'evaluation_id',
          Width: 140, align: 'center'
        }
      ],


      columns: [
        // {
        //   type: 'index',
        //   width: 50,
        //   align: 'center'
        // },
        // {
        //   type: 'selection',
        //   width: 60,
        //   align: 'center'
        // },
        // { title: '审批流程', key: 'event_type', width: 150, align: 'center', slot: 'event_type' },
        // { title: '发起人员', key: 'company_name', width: 150, align: 'center' },
        // { title: '发起时间', key: 'create_time', width: 160, align: 'center' },
        // { title: '社工姓名', key: 'CPBI003', width: 150, align: 'center' },
        // { title: '性别', key: 'sex', slot: 'sex', width: 80, align: 'center' },
        { title: '服务人员', key: 'service_name', Width: 140, align: 'center' },
        { title: '服务类别', key: 'category_name', Width: 140, align: 'center' },
        // { title: '类别编号', key: 'operator_name', width: 140, align: 'center' },
        { title: '服务条目', key: 'entry_name', width: 140, align: 'center' },
        // { title: '条目机制', key: 'operator_name', width: 140, align: 'center' },
        // { title: '评分范围', key: 'operator_name', width: 140, align: 'center' },
        // { title: '条目机制内容', key: 'operator_name', width: 140, align: 'center' },
        { title: '分值', key: 'evaluation_score', width: 140, align: 'center' },
        { title: '评价时间', slot: 'result', maxwidth: 120, align: 'center' },
        {
          title: '操作',
          key: 'action',
          minWidth: 250,
          align: 'center',
          render: (h, params) => {
            let temp = []
            temp.push(
              h('Button', {
                props: { type: 'info', size: 'small' },
                style: { marginRight: '5px', marginTop: '2px', marginBottom: '2px' },
                on: {
                  click: () => {
                    this.getFlowItem(params.row.id)
                  }
                }
              }, '查看')
            )

            if (params.row.put_place && params.row.state == '1' && params.row.level != '3') {
              temp.push(
                h('Button', {
                  props: { type: 'info', size: 'small' },
                  style: { marginRight: '5px', marginTop: '2px', marginBottom: '2px' },
                  on: {
                    click: () => {
                      this.selectCom(params.row)
                    }
                  }
                }, '选社区通过')
              )
            }


            else {

            }
            return h('div', temp)
          }
        }
      ],
      processColumns: [
        // {
        //   title: '序号',
        //   type: 'index',
        //   width: 50,
        //   align: 'center'
        // },
        // { title: '流程节点', slot: 'service_name', minWidth: 110, align: 'center' },
        { title: '提交时间', key: 'category_name', minWidth: 120, align: 'center' },
        { title: '发起人员', key: 'category_no', minWidth: 120, align: 'center' },
        { title: '社工人员', key: 'category_name', minWidth: 120, align: 'center' },
        { title: '审批人员', key: 'category_name', minWidth: 130, align: 'center' },
        { title: '审批状态', slot: 'category_name', minWidth: 100, align: 'center' },
        { title: '审批时间', key: 'category_name', minWidth: 120, align: 'center' },
        { title: '审批意见', key: 'category_name', minWidth: 220, align: 'center' }
      ]
    }
  },
  methods: {
    addNew () {
      this.drawer1 = true
    },



    closeModel () {
      this.reason = ''
      this.modal = false
    },


    // 查看详情
    getFlowItem (id) {
      this.processModal = true
      let parasm = {
        id: id
      }
      this.datalist.forEach(item => {
        if (id == item.id) {
          this.processlist = item
          this.formItem = item
          this.dataDetail = []
          this.dataDetail.push(item) 
          console.log(' this.processlist', this.dataDetail)
        }
      })
      // getRecordList(parasm).then(ret => {
      //   if (ret.data.errcode === 0) {
      //     this.processlist = ret.data.data
      //   } else {
      //     this.$Notice.error({
      //       title: '查询失败',
      //       desc: ret.data.errmsg
      //     })
      //   }
      // })
    },
    init () {
      this.searchInfo.loading1 = true
      this.datalist = []
      let parasm = {
        service_name: this.service_name,
        'pageNo': this.searchInfo.currentPageNo,
        'pageSize': this.searchInfo.currentPageSize
      }

      selectAllEvaluation(parasm).then(ret => {
        if (ret.data.errcode === 0) {
          // this.searchInfo.totalnum = ret.data.data.totalRecord
          let data = []
          this.datalist = ret.data.data
          this.searchInfo.loading1 = false
        } else {
          this.$Notice.error({
            title: '查询失败',
            desc: ret.data.errmsg
          })
        }
      })
    },


  },
  mounted () {
    this.init()
    console.log(this.$store.state.user.severUserInfo)
    if (this.companyGrade < 3) {
      // this.getMailList(2, null)
    } else if (this.companyGrade < 4) {
      this.getMailList2(4, this.companyCode)
    } else if (this.companyGrade < 5) {
      this.getMailList2(5, this.companyCode)
    }
  },
  computed: {
    companyGrade () {
      return this.$store.state.user.severUserInfo.company_grade
    },
    companyCode () {
      return this.$store.state.user.severUserInfo.company_code
    }
  }
}
</script>
